<template>
	<view class="uni-tag" v-if="text" :class="[disabled === true || disabled === 'true' ? 'uni-tag--disabled' : '',(inverted === true || inverted === 'true') && thin=='false' ? 'uni-tag--inverted' : '',circle === true || circle === 'true' ? 'uni-tag--circle' : '',mark === true || mark === 'true' ? 'uni-tag--mark' : '',thin === true || thin === 'true' ? 'uni-tag--thin' : '','uni-tag--'+size,'uni-tag--'+type]" @click="onClick()">{{text}}</view>
</template>

<script>
	export default {
		name: 'uni-tag',
		props: {
			type: { //标签类型default、primary、success、warning、danger、royal
				type: String,
				default: 'default'
			},
			size: { //标签大小 normal, small
				type: String,
				default: 'normal'
			},
			text: String, //标签内容
			disabled: { //是否为禁用状态
				type: [String, Boolean],
				defalut: false
			},
			inverted: { //是否为空心
				type: [String, Boolean],
				defalut: false
			},
			circle: { //是否为圆角样式
				type: [String, Boolean],
				defalut: false
			},
			mark: { //是否为标记样式
				type: [String, Boolean],
				defalut: false
			},
			thin: { //是否为细边
				type: [String, Boolean],
				defalut: 'false'
			}
		},
		methods: {
			onClick() {
				if (this.disabled === true || this.disabled === 'true') {
					return;
				}
				this.$emit('click')
			}
		}
	}
</script>

<style lang="scss">
	@charset "UTF-8";

	.uni-tag {
		box-sizing: border-box;
		padding: 0 32upx;
		height: 60upx;
		line-height: calc(60upx - 2px);
		font-size: 28upx;
		display: inline-block;
		color: #333;
		border-radius: 6upx;
		background-color: #F1F1F1;
		border: 1px solid #F1F1F1
	}

	.uni-tag--circle {
		border-radius: 30upx
	}

	.uni-tag--mark {
		border-radius: 0 30upx 30upx 0
	}

	.uni-tag--disabled {
		opacity: .5
	}

	.uni-tag.uni-tag--small {
		height: 44upx;
		padding: 0 16upx;
		line-height: 44upx;
		font-size: 24upx
	}

	.uni-tag--primary {
		color: #fff;
		background-color: $uni-theme-color;
		border: 1px solid $uni-theme-color
	}

	.uni-tag--primary.uni-tag--inverted {
		color: #007aff;
		background-color: #fff;
		border: 1px solid #007aff
	}

	.uni-tag--success {
		color: #fff;
		background-color: #4cd964;
		border: 1px solid #4cd964
	}

	.uni-tag--success.uni-tag--inverted {
		color: #4cd964;
		background-color: #fff;
		border: 1px solid #4cd964
	}

	.uni-tag--warning {
		color: #fff;
		background-color: #f0ad4e;
		border: 1px solid #f0ad4e
	}

	.uni-tag--warning.uni-tag--inverted {
		color: #f0ad4e;
		background-color: #fff;
		border: 1px solid #f0ad4e
	}

	.uni-tag--error {
		color: #fff;
		background-color: #dd524d;
		border: 1px solid #dd524d
	}

	.uni-tag--error.uni-tag--inverted {
		color: #dd524d;
		background-color: #fff;
		border: 1px solid #dd524d
	}
/* 
	.uni-tag--inverted {
		color: #333;
		background-color: #fff;
		border: 1px solid #c8c7cc
	}
	 */
	.uni-tag--inverted {
		color: #333;
		background-color: #fff;
		border: 1px solid #000;
	}
	
	.uni-tag.uni-tag--thin{
		border: 0px;
		background-color: #FFFFFF;
		position: relative;
	}
	.uni-tag--thin:after{
		content: " ";
		width: 200%;
		height: 200%;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-transform: scale(0.5);
		transform: scale(0.5);
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		box-sizing: border-box;
		border-radius: 5px;
		border: 1px solid #c8c7cc;
	}
	.uni-tag--.uni-tag--thin { color: #999999;}
	.uni-tag--.uni-tag--thin:after { border: 1px solid #999999;}
	
	.uni-tag--primary.uni-tag--thin { color: $uni-theme-color;}
	.uni-tag--primary.uni-tag--thin:after { border: 1px solid $uni-theme-color;}
	
	.uni-tag--error.uni-tag--thin { color: #dd524d;}
	.uni-tag--error.uni-tag--thin:after { border: 1px solid #dd524d;}
	
	.uni-tag--success.uni-tag--thin { color: #4cd964;}
	.uni-tag--success.uni-tag--thin:after { border: 1px solid #4cd964;}
	
	.uni-tag--warning.uni-tag--thin { color: #f0ad4e;}
	.uni-tag--warning.uni-tag--thin:after { border: 1px solid #f0ad4e;}
	
	/* uni-tag主题样式 */
	.uni-tag--theme { color: #fff; background-color: $uni-theme-color;border: 1px solid $uni-theme-color}
	.uni-tag--theme.uni-tag--inverted { color: $uni-theme-color; background-color: #fff; border: 1px solid $uni-theme-color}
	.uni-tag--theme.uni-tag--thin { color:$uni-theme-color;}
	.uni-tag--theme.uni-tag--thin:after { border: 1px solid $uni-theme-color;}
	
	.uni-tag--main { color: #fff; background-color: $uni-main-color;border: 1px solid $uni-main-color}
	.uni-tag--main.uni-tag--inverted { color: $uni-main-color; background-color: #fff; border: 1px solid $uni-main-color}
	.uni-tag--main.uni-tag--thin { color:$uni-main-color;}
	.uni-tag--main.uni-tag--thin:after { border: 1px solid $uni-main-color;}
</style>